<div class="cubespinner animated zoomIn" padding-bottom padding-top margin-top margin-bottom>
  <div class="face1 div-with-text ">
    <img [src]="icon.appLogo">
  </div>
  <div class="face2 div-with-text ">
    <span *ngIf="applicationTitle">
      {{ applicationTitle }}
    </span>
    <span *ngIf="!applicationTitle">
      <img [src]="icon.dhisLogo">
    </span>
  </div>
  <div class="face3 div-with-text ">
    <span *ngIf="keyApplicationIntro">
      {{ keyApplicationIntro }}
    </span>
    <span *ngIf="!keyApplicationIntro">
      <img [src]="icon.appLogo">
    </span>
  </div>
  <div class="face4">
    <span *ngIf="(keyFlag && serverUrl)">
      <img src="{{ serverUrl+ '/dhis-web-commons/flags/'+keyFlag+ '.png'}}" alt="The flag from the server ">
    </span>
    <span *ngIf="!(keyFlag && serverUrl)">
      <img [src]="icon.dhisLogo">
    </span>
  </div>
  <div class="face5 div-with-text ">
    <span *ngIf="keyApplicationNotification">
      {{ keyApplicationNotification }}
    </span>
    <span *ngIf="!keyApplicationNotification">
      <img [src]="icon.appLogo">
    </span>
  </div>
  <div class="face6 div-with-text ">
    <span *ngIf="keyApplicationFooter">
      {{ keyApplicationFooter }}
    </span>
    <span *ngIf="!keyApplicationFooter">
      <img [src]="icon.dhisLogo">
    </span>
  </div>
</div>
